<template>
    <div style="width: 100%; height: 100vh; background-color: darkblue; overflow:hidden">    <!--background-color: darkblue;背景色 overflow隐藏上层的空白-->
        <div style="width: 400px; margin: 150px auto">
            <div style="color: chartreuse; font-size: 30px; text-align: center; padding: 30px 0 30px 20px;">欢迎登录</div>
            <el-form ref="form" :model="form" size="normal"  :rules="rules">
                <!--图标问题-->
                <el-form-item prop="username">
                    <el-input v-model="form.username" :prefix-icon="Avatar"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" show-password :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item label-width="138px">
                    <el-button type="primary" style="width: 60%" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import request from "../utils/request";
    // 一个用户图像+密码锁图标
    import { Avatar, Lock } from "@element-plus/icons";

    export default {
        name: "Login",
        setup(){
            return {
                Avatar,
                Lock
            }
        },
        data(){
            return {
                form: {},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                }
            }
        },
      mounted() {
        sessionStorage.removeItem("user")

        window.onresize = () => {
          const windowWidth = document.body.clientWidth
          const windowHeight = document.body.clientHeight
          const windowAspectRatio = windowHeight / windowWidth
          let videoWidth
          let videoHeight
          if (windowAspectRatio < 0.5625) {
            videoWidth = windowWidth
            videoHeight = videoWidth * 0.5625
            this.fixStyle = {
              height: windowWidth * 0.5625 + 'px',
              width: windowWidth + 'px',
              'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
              'margin-left': 'initial'
            }
          } else {
            videoHeight = windowHeight
            videoWidth = videoHeight / 0.5625
            this.fixStyle = {
              height: windowHeight + 'px',
              width: windowHeight / 0.5625 + 'px',
              'margin-left': (windowWidth - videoWidth) / 2 + 'px',
              'margin-bottom': 'initial'
            }
          }
        }
        window.onresize()
      },
      methods: {
            login(){
                this.$refs['form'].validate((valid) => {
                   if (valid){
                       request.post("/user/login",this.form).then(res => {
                           console.log(res);
                           if (res.code === '0'){
                               this.$message({
                                   type: "success",
                                   message: "登录成功",
                               });
                             sessionStorage.setItem("user", JSON.stringify(res.data));  // 缓存用户信息
                             this.$router.push("/user");  //登录成功之后进行页面的跳转，跳转到主页
                           }else {
                               this.$message({
                                   type: "error",
                                   message: res.msg,
                               })
                           }
                       })
                   }
                });
            }
        }
    }
</script>

<style scoped>

</style>